<template>
  <div class="home">
    <T :slogan="slogan"></T>
    <header class="home-header">
      <div class="placeholder">
        <img :src="qxjsLogo" class="home-logo" alt="logo" /><br />
        <span>青出于蓝，而不是蓝</span>
      </div>
    </header>
  </div>
</template>
<script>
import qxjsLogo from '@/assets/img/qxjsLogo.svg';
import T from '@/components/T.vue';
const slogan = [
  '分享的你的滤镜',
  '重新定义三观（世界观、价值观、人生观）',
  '你的世界不是你知道的世界',
  '青出于蓝，而不是蓝',
  '分享你的主观世界'
].join('');
export default {
  components: { T },
  data() {
    return {
      slogan,
      qxjsLogo
    };
  }
};
</script>
<style lang="scss" scoped>
body {
  .loading {
    #content {
      position: relative;
      width: 100%;
      height: 100%;
      font-size: 0px;
      #logo {
        position: absolute;
        display: block;
        width: 140px;
        height: 140px;
        top: calc(50vh - 70px);
        left: calc(50vw - 70px);
      }
      #noscript {
        position: relative;
        font-family: Arial;
        font-size: 20px;
        margin: 0 auto;
        text-align: center;
        max-width: 384px;
        padding: 48px;
        height: 100vh;
      }
    }
  }
  .home {
    position: relative;
    text-align: center;
    .home-header {
      display: inline-block;
      .placeholder {
        margin-top: 133px;
        .home-logo {
          position: relative;
          z-index: 1;
          width: 276px;
          transition: 1s;
          &:hover {
            width: 552px;
            margin-bottom: 0;
          }
        }
        span {
          margin-top: 33px;
          display: inline-block;
        }
      }
    }
  }
  .loading {
    #content {
      position: relative;
      width: 100%;
      height: 100%;
      font-size: 0px;
    }
    #logo {
      position: absolute;
      display: block;
      width: 140px;
      height: 140px;
      top: calc(50vh - 70px);
      left: calc(50vw - 70px);
    }
    #noscript {
      position: relative;
      font-family: Arial;
      font-size: 20px;
      margin: 0 auto;
      text-align: center;
      max-width: 384px;
      padding: 48px;
      height: 100vh;
    }
  }
}
</style>
